<!-- 5:图片轮播用jquery实现 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.4.1.min.js"></script>
		<style>
			.dav {
				position: relative;
				top: 200px;
				left: 30%;
			}

			.dbv {
				list-style-type: none;
				position: absolute;
				bottom: 0px;
				left: 12%;
				bottom: 1%;
				display: flex;
			}

			.dbv li {
				/* opacity: 0.2; */
				border: 1px solid red;
				border-radius: 50%;
				background-color: white;
				height: 16px;
				width: 16px;
			}
		</style>
	</head>
	<body>
		<div class="dav">
			<a href="#"><img id="imga" src="images/1.jpg" alt=""></a>
			<ul class="dbv">
				<li class="lia" id="a1"></li>
				<li class="lia" id="a2"></li>
				<li class="lia" id="a3"></li>
				<li class="lia" id="a4"></li>
				<li class="lia" id="a5"></li>
			</ul>
		</div>
	</body>
	<script>
		$(function() {
			var i = 1;

			function chuange() {
				let imga = $("#imga");
				$(".lia").css("background-color", "white");
				$(".lia").eq(i - 1).css("background-color", "red");
				var str = "images/" + i + ".jpg";
				$("#imga").prop("src", str);
				i++;
				if (i > 5) {
					i = 1;
				}
			}
			var lun = setInterval(function() {
				chuange();
			}, 1000);;

			$("#imga").mouseover(function() {
				clearInterval(lun);
			});
			$("#imga").mouseout(function() {
				lun = setInterval(function() {
					chuange();
				}, 1000);
			});


		})
	</script>
</html>
